<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!--头部信息-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>热门推荐 - </title>
<!-- zui -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<link rel="shortcut icon"  type="image/x-icon" href="">
<link href="/dist/css/zui.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/media.css" rel="stylesheet">
  <script>var $pageInfo = {siteId : 1, channelId : 16, contentId : 0, siteUrl : "", rootUrl : "", apiUrl : "/api"};</script>
</head>
  <body>
    <!--[if lt IE 8]>
    <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
    <![endif]-->
    <!--头部导航条-->
    <header>
      
<div class="main">
<h1 class="logo">
  <a href="/index.html">
    <img src="/images/logo.png">
    <span>小呆导航</span>
  </a>
</h1>
<nav class="nav">
  <ul>
    <!--获取导航链接/从首页向下第一个栏目起/只显示nav栏目组-->
    <li><a href="/channels/2.html">教程资源</a></li><li><a href="/channels/3.html">高清图库</a></li><li><a href="/channels/4.html">软件下载</a></li><li><a href="/channels/5.html">个人博客</a></li><li><a href="/channels/6.html">在线留言</a></li>
  </ul>
</nav>
<button class="bar-btn visible-xs">
  <span class="icon-bar bar-line1"></span>
  <span class="icon-bar bar-line2"></span>
</button>
<button class="nav-btn visible-xs">
  <span class="icon-line top"></span>
  <span class="icon-line middle"></span>
  <span class="icon-line bottom"></span>
</button>
</div>

    </header>
    <div class="content">
      <!--导航条-->
      <div class="mask"></div>
      <div class="left-bar">
        <div class="header"><h2>导航目录</h2></div>
        <nav class="menu" data-ride="menu">
          <ul id="treeMenu" class="tree tree-menu" data-ride="tree">
            <li class="open">
                <a href="/web.html">前端开发</a>
                <ul>
                  <!--从首页向下循化3级栏目列表：0为首页-->
                  <!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-1"><i class="icon icon-diamond"></i>视频教程</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-2"><i class=""></i>在线学习</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-3"><i class=""></i>碎片学习</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-4"><i class=""></i>学习工具</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-5"><i class=""></i>WEB公共库</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-6"><i class=""></i>前端组织</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-7"><i class=""></i>前端框架 - UI</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-8"><i class=""></i>前端框架 - JS</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-9"><i class=""></i>前端插件</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-10"><i class=""></i>移动框架</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-11"><i class=""></i>预处理器</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-12"><i class=""></i>字体图标</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-13"><i class=""></i>构建工具</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-14"><i class=""></i>模块加载</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-15"><i class=""></i>包管理器</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-16"><i class=""></i>模板引擎</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-17"><i class=""></i>游戏引擎</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/web.html?#row-18"><i class=""></i>代码高亮</a></li>
                </ul>
              </li><li class="">
                <a href="/channels/11.html">界面设计</a>
                <ul>
                  <!--从首页向下循化3级栏目列表：0为首页-->
                  <!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/16.html?"><i class=""></i>热门推荐</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/17.html?"><i class=""></i>学习教程</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/18.html?"><i class=""></i>灵感采集</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/19.html?"><i class=""></i>界面交互</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/20.html?"><i class=""></i>设计规范</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/21.html?"><i class=""></i>在线工具</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/22.html?"><i class=""></i>icon图标</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/23.html?"><i class=""></i>设计素材</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/24.html?"><i class=""></i>图库素材</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/25.html?"><i class=""></i>颜色搭配</a></li><!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/26.html?"><i class=""></i>字体字形</a></li>
                </ul>
              </li><li class="">
                <a href="/channels/12.html">影视后期</a>
                <ul>
                  <!--从首页向下循化3级栏目列表：0为首页-->
                  <!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/27.html?"><i class=""></i>后期教程</a></li>
                </ul>
              </li><li class="">
                <a href="/channels/13.html">日常办公</a>
                <ul>
                  <!--从首页向下循化3级栏目列表：0为首页-->
                  <!--获取栏目的icon图标类名和栏目标题/图标类名字段在“设置管理”中添加-->
                    <li><a href="/channels/28.html?"><i class=""></i>热门推荐</a></li>
                </ul>
              </li>
          </ul>
        </nav>
        <div class="menu-about">
          <p>工作 / 学习 / 生活 / 网址导航</p>
          <p>@小呆导航 V2.0</p>
        </div>
      </div>
      <!--内容-->
      <div class="main">
        <div class="container mainContent">
          
<section class="sousuo">
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form class="sousuo-form" name="f" action="http://www.baidu.com/s" target="_blank">
        <div id="Select">
          <div class="Select-box hidden-xs">
            <ul>
              <li class="this_s">百 度</li>
              <li class="baidu_s">百 度</li>
              <li class="google_s">谷 歌</li>
              <li class="bing_s">必 应</li>
              <li class="haosou_s">好 搜</li>
              <li class="sougou_s">搜 狗</li>
            </ul>
          </div>
          <input type="text" name="wd" id="input" maxlength="100" autocomplete="off">
          <div class="qingkong" id="qingkong" title="清空">x</div>
        </div>
        <button id="so-btn"><i class="icon icon-search visible-xs"></i><span class="hidden-xs">搜 索</span></button>
      </form>
    </div>
  </div>
</div>
</section><!--搜索栏-->
          <!--
          <section class="item card-box" id="row-1">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>视频教程</strong>
                  </div>
                  <div class="clearfix two-list-box">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://www.howzhi.com/channel/IT-internet" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/d783b03661151a61.png">好知网 - IT互联网</img></div>
                          <div class="card-desc">好知网是一个综合性在线学习平台，有大量的在线课程，部分课程收费&#65281;</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.yun.lu" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/714fd14ba24c4f05.png">云路课堂</img></div>
                          <div class="card-desc">专业的职业技能学习平台，免费课程很多。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.ycku.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/71cd3036659ca229.png">瓢城Web俱乐部</img></div>
                          <div class="card-desc">一个不错的在线视频教程网站，部分教程还在持续更新中。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://chuanke.baidu.com/course/72351176527446016.html" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/e98eea5c069dfabb.jpg">百度传课 - 编程语言</img></div>
                          <div class="card-desc">百度推出的教育领域新兴在线教育平台，免费视频教程很丰富，基本都是免费的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://ke.qq.com/course/list?mt=1001" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/fade5e1bbefe8d99.jpg">腾讯课程 - IT·互联网</img></div>
                          <div class="card-desc">腾讯推出的专业在线教育平台，采用直播教学方式，适合有充裕时间学习的同学。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://study.163.com/category/it" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/79beca65ce8bc119.png">网易云课程 - 编程开发</img></div>
                          <div class="card-desc">网易旗下实用技能学习平台，内容非常丰富，免费教程也挺多的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://jirengu.com/app/album/index" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/9461d14d54e6841d.jpg">饥人谷</img></div>
                          <div class="card-desc">一家收费的前端开发线上培训机构，虽然课程收费，但是官网还是有挺多免费教程视频的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.zhaikexueyuan.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/5f6091b78dfddbc1.jpg">宅客学院</img></div>
                          <div class="card-desc">IT职业教育线上品牌，课程涵盖大数据、前端开发、后端开发等，免费课程挺多的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.jikexueyuan.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/842106729c4621e7.jpg">极客学院</img></div>
                          <div class="card-desc">一家很不错的IT职业在线教育平台，入门教程视频通俗易懂，很适合新手学习。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://www.imooc.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/12477e879c32ff6.jpg">慕课网</img></div>
                          <div class="card-desc">程序员的梦工厂，慕课网是垂直的互联网IT技能免费学习网站。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-2">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>在线学习</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="https://developer.mozilla.org/zh-CN/docs/Learn" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/d423f5847e9667b9.png">Mozilla 开发者网络</img></div>
                          <div class="card-desc">一个完整的学习平台，你可以在这里深入学习网络技术以及能够驱动网络的软件</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.css88.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/8d3e38a022e4c9c8.png">WEB前端开发</img></div>
                          <div class="card-desc">一个前端开发技术和前端开发资讯的专业博客，专注前端开发，关注用户体验。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.w3cways.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/7547849854582437.jpg">W3Cways</img></div>
                          <div class="card-desc">Web前端学习之路，网站提供很丰富的相关技术中文文档。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.hubwiz.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/b02c4c6d67862318.jpg">汇智网</img></div>
                          <div class="card-desc">汇智网是一个学习最前沿编程技术的平台，提供了node.js、js、jq等相关的课程。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.runoob.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/b7e82395f78d6d4b.png">菜鸟教程</img></div>
                          <div class="card-desc">学的不仅是技术，更是梦想&#65281;该站提供了很全的编程技术基础教程，适合入门学习。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.w3school.com.cn" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/f1fec4b71457dfd3.jpg">w3school</img></div>
                          <div class="card-desc">领先的免费 Web 技术教程，在 w3school，你可以找到你所需要的所有的网站建设教程。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-3">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>碎片学习</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://www.zhangxinxu.com/jq/stylus/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/73468ef8a56720af.png">Stylus中文文档</img></div>
                          <div class="card-desc">张鑫旭 - stylus中文版参考文档之综述</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.bootcss.com/p/lesscss/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/a2750823b5c82838.png">Less教程</img></div>
                          <div class="card-desc">Bootstrap推出的Less中文教程</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://nec.netease.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/92664fcfb80ba4b6.png">NEC(CSS规范)</img></div>
                          <div class="card-desc">NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.ctolib.com/javascript.html" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/6e8bdda418fac627.png">JavaScript开发社区</img></div>
                          <div class="card-desc">各种有关JS教程及开源项目，如果你感兴趣，还可以浏览器该站其他内容，如PHP、JAVA开发等。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://www.lvtao.net/content/book/node.js.htm" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/caa3b227baad960e.jpg">七天学会NodeJS</img></div>
                          <div class="card-desc">阿里国际站前端技术部写的一个博文，如果有耐心读完，相信还是有不少收获的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://css3clickchart.com/#box-sizing" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/c5d51725c4b8cf93.png">CSS Click Chart</img></div>
                          <div class="card-desc">可以查询到目前CSS3草案部分的相关属性</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://daneden.github.io/animate.css/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/f960fbc8f72aaa35.jpg">Animate动画库</img></div>
                          <div class="card-desc">各种Animate动画案例，可以直接预览效果，如果你稍微会点Animate知识，可以试着去读源代码，帮助自己提高Animate技能</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://browserhacks.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/afc5cbcb824cc5d9.png">浏览器hack大全</img></div>
                          <div class="card-desc">由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，于是就有了针对不同的浏览器写不同的CSS code，这就叫CSS hack</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-4">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>学习工具</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="https://www.gitbook.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/4b9e68253a43ce9a.png">GitBook</img></div>
                          <div class="card-desc">GitBook 是一个基于 Node.js 的命令行工具，可使用 Github/Git 和 Markdown 来制作精美的电子书。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://codepen.io/pen" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/5fb617fb23cff988.png">CodePen</img></div>
                          <div class="card-desc">CodePen是浏览器中的HTML，CSS和JavaScript代码编辑器，可即时预览查看和编写您的代码。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://jsfiddle.net/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/8f76df04afe27a23.png">JSFiddle</img></div>
                          <div class="card-desc">一个老牌的在线JS代码调试工具，支持javascript、css、html代码可视化在线调试工具,支持多种应用多种主流框架,用起来非常方便</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://jsbin.com" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/e43efa9fd4d43c37.png">JS Bin</img></div>
                          <div class="card-desc">一个在线网站代码调试工具，主要用于测试 JavaScript 和 CSS 的代码片段的Web 应用，拥有简单的操作界面和全面的测试环境。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-5">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>WEB公共库</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="https://www.awesomes.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/df3464494acf97c1.jpg">Awesomes</img></div>
                          <div class="card-desc">Web前端开发工程师需要的免费开源的高质量前端库、框架和插件。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://jscdn.upai.com/?spm=a2c4e.11155515.0.0.kf06Hb" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/76d6ac7d8bfee713.jpg">又拍云CDN</img></div>
                          <div class="card-desc">又拍云JS库加速服务，你可以在自己的网页上直接通过script标记引用这些资源。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/9f09d5ccb0a47177.jpg">微软CDN</img></div>
                          <div class="card-desc">微软公司提供的公共CDN服务。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://libs.useso.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/a505584985d49fd7.png">360DNS</img></div>
                          <div class="card-desc">360网站卫士常用前端公共库CDN服务。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://cdnjs.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/59623ce0c3041e2f.png">cdnjs</img></div>
                          <div class="card-desc">最全的CDN公用库, 速度不是太稳定。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://www.staticfile.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/49e12d0792585b8c.png">Staticfile CDN</img></div>
                          <div class="card-desc">为开源库提供稳定、快速的免费 CDN 服务，类似于CDNJS，非常推荐。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.bootcdn.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/c250ebcf1766d7aa.png">BootCDN</img></div>
                          <div class="card-desc">稳定、快速、免费的开源项目 CDN 服务，共收录了 3300&#43; 开源项目。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://cdn.code.baidu.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/388ae4bfd809a498.jpg">百度静态资源公共库</img></div>
                          <div class="card-desc">稳定，快速，全面，开源的国内CDN加速服务。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-6">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>前端组织</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://jsconf.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/85a5beb6112b18d9.png">JSConf</img></div>
                          <div class="card-desc">JavaScript中国开发者大会&#40;JSConf China&#41;是一个围绕 JS 开发者为中心的活动。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://feexp.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/273e79050aab72d.png">前端体验大会</img></div>
                          <div class="card-desc">互联网前端业界一个交流会组织，旨在推动互联网前端web技术在中国的发展，致力于为同行从业者提供一个分享和交流的平台，提升从业者的影响力及技术能力储备。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://www.w3.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/31ea9216167fbc8f.jpg">万维网联盟W3C</img></div>
                          <div class="card-desc">万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-7">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>前端框架 - UI</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://www.layui.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/8c90a8c835f2a1a5.jpg">Layui</img></div>
                          <div class="card-desc">Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.jeasyui.net/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/3c6dbce53f4733cb.png">Jquery EasyUI中文网</img></div>
                          <div class="card-desc">easyui是一种基于jQuery的用户界面插件集合。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://jqueryui.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/ab8da1da027f1cfb.gif">jQuery UI</img></div>
                          <div class="card-desc">jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://semantic-ui.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/f2fe8864ffff8dc9.png">Semantic UI中文官方网站</img></div>
                          <div class="card-desc">Semantic 是一个用来帮助创建漂亮、响应化、人性化的开发框架</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://foundation.zurb.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/cb5292cba7645837.png">Foundation</img></div>
                          <div class="card-desc">Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://v3.bootcss.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/147cc14799fd6749.jpg">Bootstrap</img></div>
                          <div class="card-desc">最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-8">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>前端框架 - JS</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://docs.kissyui.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/8ec072fa61037f1d.png">KISSY</img></div>
                          <div class="card-desc">KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://cn.vuejs.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/86c6ca7942dabaf5.png">Vue.js 中文网</img></div>
                          <div class="card-desc">Vue.js 是一个用于创建 Web 交互界面的库，它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://doc.react-china.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/cdc2d49e875b0915.jpg">React.js中文网</img></div>
                          <div class="card-desc">用于构建用户界面的 JavaScript 库，React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://www.angularjs.net.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/55c0271adefb7aa5.jpg">Angular.js中文网</img></div>
                          <div class="card-desc">AngularJS是为了克服HTML在构建应用上的不足而设计的。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://www.jquery123.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/12c3ebb7fb02ef75.png">jQuery</img></div>
                          <div class="card-desc">jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-9">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>前端插件</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="https://kushagragour.in/lab/hint/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/69e2033b5b256c95.png">Hint.css</img></div>
                          <div class="card-desc">一款非常小巧的提示框效果插件。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://echarts.baidu.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/e1421fa2cf085ffd.png">EChart</img></div>
                          <div class="card-desc">百度EFE团队出品的可视化图表插件。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://lokeshdhakar.com/projects/lightbox2/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/d8926c9541545e85.png">Lightbox</img></div>
                          <div class="card-desc">以弹框形式集中展示图片的JavaScript库。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://layer.layui.com/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/ab1b9b49a9e9e2f5.png">Layer</img></div>
                          <div class="card-desc">一个让你想到即可做到的web弹窗/层解决方案。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-10">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>移动框架</strong>
                  </div>
                  <div class="clearfix ">
                    <div class="col-md-3 col-xs-6">
                        <a href="http://dev.dcloud.net.cn/mui/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/5b778024286f5735.png">Mui</img></div>
                          <div class="card-desc">最接近原生APP体验的高性能前端框架。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://framework7.taobao.org/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/5d3116c4e7f2726d.png">Framework7</img></div>
                          <div class="card-desc">功能强大的创建 iOS & Android APP 的 HTML 框架。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="https://weex-project.io/cn/index.html" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/d7378a39a8abcb3d.png">Weex</img></div>
                          <div class="card-desc">阿里推出的跨平台的移动端开发框架，具有轻量级、可扩展和高性能的特点。</div>
                        </a>
                      </div><div class="col-md-3 col-xs-6">
                        <a href="http://ionicframework.com.cn/" class="card-link" target="_blank">
                          <div class="card-tit"><img src="/upload/images/2018/3/1a76f4ded308fd25.jpg">Ionic</img></div>
                          <div class="card-desc">领先的HTML5 移动开发框架和 SDK，利用你所熟知的web 技术构建难以置信的移动应用，是AngularJS最好的朋友。</div>
                        </a>
                      </div>
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-11">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>预处理器</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-12">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>字体图标</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-13">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>构建工具</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-14">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>模块加载</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-15">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>包管理器</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-16">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>模板引擎</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-17">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>游戏引擎</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section><section class="item card-box" id="row-18">
              <div class="container-fluid">
                <div class="row">
                  <div class="item-tit">
                    <strong><i class="icon icon-user"></i>代码高亮</strong>
                  </div>
                  <div class="clearfix ">
                    
                  </div>
                </div>
              </div>
            </section>
          -->
        </div>
        <!--页脚-->
        <footer class="footer">
          <div class="container">
            <div class="rwo">
              <div class="col-md-12">
                <p>本站内容采自互联网，如果某些内容侵犯了你的权益，麻烦联系我，我将尽快删除相关内容。</p>
                <p>Copyright © 2017 www.webjike.com All Rights Reserved</p>
              </div>
            </div>
          </div>
        </footer>
      </div><!--内容区域-->
    </div>
    <div id="get-top" title="回到顶部"><i class="icon icon-arrow-up"></i></div>
    <!--[if lt IE 9]>
    <script src="dist/lib/ieonly/html5shiv.js"></script>
    <script src="dist/lib/ieonly/respond.js"></script>
    <![endif]-->
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="/dist/js/zui.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="/js/js.js"></script>
  </body>
</html>



<script type="text/javascript" language="javascript">document.ondblclick=function(x){location.href = '/api/sys/stl/actions/trigger?siteId=1&channelId=16&contentId=0&fileTemplateId=0&isRedirect=True&returnUrl=' + encodeURIComponent(location.search);}</script>
